<%@ control language="C#" autoeventwireup="true" codefile="DefineRoute.ascx.cs" inherits="_controls_Share_DefineRoute" %>
<asp:scriptmanagerproxy runat="server" id="scrptManagerProxy">
    <scripts>
        <asp:scriptreference path="~/_script/jquery/plugins/jquery.autocomplete.js" />
        <asp:scriptreference path="~/_script/jquery/plugins/jquery.bgiframe.js" />
        <asp:scriptreference path="~/_script/jquery/plugins/jquery.dimensions.pack.js" />
    </scripts>
</asp:scriptmanagerproxy>
<h1>
    Tell us about your journey!</h1>
<table style="width: 100%">
    <tbody valign="top">
        <tr>
            <td colspan="2">
                <h4>
                    Country</h4>
                <asp:dropdownlist runat="server" id="ddlCountry" datasourceid="countryDataSource"
                    datatextfield="EnglishName" datavaluefield="Id" appenddatabounditems="true">
                    <asp:listitem selected="true" text="-- Please Select --" value="-1"></asp:listitem>
                </asp:dropdownlist>
                <asp:objectdatasource id="countryDataSource" runat="server" oldvaluesparameterformatstring="original_{0}"
                    selectmethod="FetchAll" typename="MyCityCab.Core.CountryController"></asp:objectdatasource>
            </td>
        </tr>
        <tr>
            <td>
                <h3>
                    From</h3>
            </td>
            <td>
                <h3>
                    To</h3>
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tbody valign="top">
                        <tr>
                            <td>
                                Region / State</td>
                            <td>
                                <asp:textbox runat="server" id="txtRegionFrom" maxlength="100"></asp:textbox></td>
                        </tr>
                        <tr>
                            <td>
                                City</td>
                            <td>
                                <asp:textbox runat="server" maxlength="100" id="txtCityFrom"></asp:textbox></td>
                        </tr>
                        <tr>
                            <td>
                                Place Marker</td>
                            <td>
                                <asp:textbox runat="server" maxlength="100" id="txtPlaceMarkerFrom"></asp:textbox></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <tbody valign="top">
                        <tr>
                            <td>
                                Region / State</td>
                            <td>
                                <asp:textbox runat="server" id="txtRegionTo" maxlength="100"></asp:textbox></td>
                        </tr>
                        <tr>
                            <td>
                                City</td>
                            <td>
                                <asp:textbox runat="server" maxlength="100" id="txtCityTo"></asp:textbox></td>
                        </tr>
                        <tr>
                            <td>
                                Place Marker</td>
                            <td>
                                <asp:textbox runat="server" maxlength="100" id="txtPlaceMarkerTo"></asp:textbox></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $("#<%=ddlCountry.ClientID %>").change(function(){
            if(this.selectedIndex == 0)
                return;
            var selectedCountryId = $(this.options[this.selectedIndex]).val();
            $("#<%=txtCityFrom.ClientID %>").autocomplete("_handlers/ajaxhandler.ashx", {extraParams:{type:"city", countryId:selectedCountryId}});
            $("#<%=txtCityTo.ClientID %>").autocomplete("_handlers/ajaxhandler.ashx", {extraParams:{type:"city", countryId:selectedCountryId}});
            $("#<%=txtRegionTo.ClientID %>").autocomplete("_handlers/ajaxhandler.ashx", {extraParams:{type:"region", countryId:selectedCountryId}});
            $("#<%=txtRegionFrom.ClientID %>").autocomplete("_handlers/ajaxhandler.ashx", {extraParams:{type:"region", countryId:selectedCountryId}});            
        });
    });
</script>

